<template>
    <el-row :gutter="32">
        <el-col :span="24">
            <el-breadcrumb style="margin-bottom: 10px;" separator="/">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item><a href="/">部门管理</a></el-breadcrumb-item>
            </el-breadcrumb>
        </el-col>
        
            <el-col :xs="24"  :span="7">
                <div style="width: 170px;display: flex;justify-content: space-between;">
                    <div @click="addZh" class="btn-div" style="border-top-left-radius: 3px;border-bottom-left-radius: 3px">新增</div>
                    <div @click="delZh" class="btn-div">删除</div>
                    <div @click="updZh" class="btn-div" style="border-top-right-radius: 3px;border-bottom-right-radius: 3px">修改</div>
                </div>
                <el-tree style="margin-top: 0.625rem;" :data="data" node-key="id" default-expanded-keys="1" accordion=true  :props="defaultProps" @node-click="handleNodeClick"></el-tree>
            </el-col>
            <el-col :xs="24" :span="17">
                <el-form size="small" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="父级节点" prop="name">
                        <el-input :disabled="true" v-model.number="ruleForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="组织名称" prop="department">
                        <el-input :disabled="inputcanupdate" v-model="ruleForm.department"></el-input>
                    </el-form-item>
                    <el-form-item label="组织类别" prop="type">
                        <el-radio-group :disabled="inputcanupdate" v-model="ruleForm.type">
                          <el-radio label="0">公司</el-radio>
                          <el-radio label="1">部门</el-radio>
                        </el-radio-group>
                      </el-form-item>
                    <el-form-item label="排序权重" prop="order">
                        <el-input :disabled="inputcanupdate" v-model="ruleForm.order"></el-input>
                    </el-form-item>
                    <el-form-item v-show="!inputcanupdate">
                        <el-button type="primary" @click="submitForm('ruleForm')">确认</el-button>
                        <el-button @click="resetForm('ruleForm')">取消</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        
    </el-row>
</template>

<script>
    import {
        ElMessage
    } from 'element-plus'
    const axios = require('axios');
    export default {
        data() {
            return {
                data: "",
                defaultProps: {
                    children: 'children',
                    label: 'name'
                },
                selectnode: "",
                inputcanupdate: true,
                changeType:true,
                ruleForm: {
                    name: '',
                    department: '',
                    order: '',
                    type:"",
                    parentId:"",
                },
                touchType: "",
                rules: {
                    name: [{
                            required: true,
                            message: '请选择父节点',
                            trigger: 'blur'
                        }
                    ],
                    department: [{
                        required: true,
                        message: '部门名称不能为空',
                        trigger: 'blur'
                    }],
                    order: [{
                            required: true,
                            message: '排序权重不能为空',
                            trigger: 'blur'
                        }
                    ],
                    type: [{
                            required: true,
                            message: '组织类型必选',
                            trigger: 'blur'
                        }
                    ]
                }
            };
        },
        methods: {
            handleNodeClick(data) {
                this.$data.inputcanupdate = true;
                this.$data.selectnode = data;
                this.$data.ruleForm.name = parseInt(data.parentId);
                this.$data.ruleForm.department = data.name;
                this.$data.ruleForm.order = parseInt(data.ordernum);
                this.$data.ruleForm.type = data.type.toString();
                this.$data.changeType=true
                if(parseInt(data.parentId)==1||parseInt(data.parentId)==2){
                    this.$data.changeType=false
                }
                console.log(this.$data.selectnode);
            },
            submitForm(formName) {
                var that = this;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        var params = ""
                        if (that.$data.touchType == "update") {
                            params = {
                                id: that.$data.selectnode.id,
                                name: that.$data.ruleForm.department,
                                parentId: that.$data.ruleForm.name,
                                order: that.$data.ruleForm.order,
                                type:that.$data.ruleForm.type
                            }
                        }else if (that.$data.touchType == "add") {
                            params = {
                                id: "",
                                name: that.$data.ruleForm.department,
                                parentId: that.$data.ruleForm.name,
                                order: that.$data.ruleForm.order,
                                type:that.$data.ruleForm.type
                            }
                        }
                        console.log(params)
                        var url = "http://localhost:8081/manage/department/saveorupdate?params=" +encodeURIComponent(encodeURIComponent(JSON.stringify(params)))
                        axios.get(url)
                            .then(
                                function(res) {
                                    console.log(res)
                                    if (res.data.resultmsg.code == 200) {
                                        that.$data.ruleForm = {
                                            name: '',
                                            department: '',
                                            order: ''
                                        };
                                        that.$data.selectnode = "";
                                        that.$data.inputcanupdate = true;
                                        that.$message.success({
                                            message: res.data.resultmsg.msg,
                                            type: 'success',
                                            duration: 1000,
                                            center: true
                                        });
                                        that.getMsg()
                                        
                                    } else if (res.data.resultmsg.code == 400001) {
                                        that.$message.error({
                                            message: res.data.resultmsg.msg,
                                            type: 'error',
                                            duration: 1000,
                                            center: true
                                        });
                                    } else if (res.data.resultmsg.code == 400002) {
                                        that.$message.error({
                                            message: res.data.resultmsg.msg,
                                            type: 'error',
                                            duration: 1000,
                                            center: true
                                        });
                                        setTimeout(function() {
                                            that.$router.push("login")
                                        }, )
                                    }
                                }
                            )
                            .catch(function(error) { // 请求失败处理
                                console.log(error);
                            });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm() {
                // this.$refs[formName].resetFields();
                this.inputcanupdate = true;
            },
            addZh() {
                var that = this
                if (this.selectnode == "") {
                    ElMessage.warning({
                        message: '请先选择组织',
                        type: 'warning',
                        center: true
                    });
                }else if(this.selectnode.type==1){
                    ElMessage.warning({
                        message: '部门不能再增加下级组织哦',
                        type: 'warning',
                        center: true
                    });
                } else {
                    that.touchType = "add"
                    if (this.selectnode.parentId < 2) {
                        that.ruleForm = {
                            name: that.selectnode.id,
                            department: '',
                            order: '',
                            type:'',
                            parentId:that.selectnode.parentId
                        };
                        this.inputcanupdate = false;
                    } else {
                        this.inputcanupdate = true;
                        ElMessage.error({
                            message: '当前仅支持三级组织结构',
                            type: 'error',
                            center: true
                        });
                    }
                }
            },
            delZh() {
                if (this.selectnode == "") {
                    ElMessage.warning({
                        message: '请先选择组织',
                        type: 'warning',
                        center: true
                    });
                    return;
                }
                this.$confirm('此操作将永久删除该组织, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    var that = this;
                    var url = "http://localhost:8081/manage/department/delbyid?id=" + that.selectnode.id
                    axios.get(url)
                        .then(
                            function(res) {
                                console.log()
                                if (res.data.resultmsg.code == 200) {
                                    that.$message.success({
                                        message: res.data.resultmsg.msg,
                                        type: 'success',
                                        duration: 1000,
                                        center: true
                                    });
                                    that.getMsg()
                                    that.$data.ruleForm = {
                                        name: '',
                                        department: '',
                                        order: ''
                                    };
                                    that.$data.selectnode = "";
                                    that.$data.inputcanupdate = true;
                                } else if (res.data.resultmsg.code == 400001) {
                                    that.$message.error({
                                        message: res.data.resultmsg.msg,
                                        type: 'error',
                                        duration: 1000,
                                        center: true
                                    });
                                } else if (res.data.resultmsg.code == 400002) {
                                    that.$message.error({
                                        message: res.data.resultmsg.msg,
                                        type: 'error',
                                        duration: 1000,
                                        center: true
                                    });
                                    setTimeout(function() {
                                        that.$router.push("login")
                                    }, )
                                }
                            }
                        )
                        .catch(function(error) { // 请求失败处理
                            console.log(error);
                        });
                })
                
            },
            updZh() {
                var that = this
                if (this.selectnode == "") {
                    ElMessage.warning({
                        message: '请先选择组织',
                        type: 'warning',
                        center: true
                    });
                } else {
                    that.$data.ruleForm = {
                        name: that.$data.selectnode.parentId,
                        department: that.$data.selectnode.name,
                        order: that.$data.selectnode.ordernum,
                        type: that.$data.selectnode.type.toString(),
                        parentId:that.selectnode.parentId
                    };
                    console.log(that.$data.ruleForm)
                    that.$data.touchType = "update"
                    that.$data.inputcanupdate = false;
                }
            },
            getMsg() {
                var that = this;
                var url = "http://localhost:8081/manage/department/getall"
                axios
                    .get(url)
                    .then(
                        function(res) {
                            console.log()
                            if (res.data.resultmsg.code == 200) {
                                var resdata = res.data.resultmsg.data
                                resdata[0].children = JSON.parse(res.data.resultmsg.data[0].children)
                                that.$data.data = resdata
                            } else if (res.data.resultmsg.code == 400001) {
                                that.$message.error({
                                    message: res.data.resultmsg.msg,
                                    type: 'error',
                                    duration: 1000,
                                    center: true
                                });
                            } else if (res.data.resultmsg.code == 400002) {
                                that.$message.error({
                                    message: res.data.resultmsg.msg,
                                    type: 'error',
                                    duration: 1000,
                                    center: true
                                });
                                setTimeout(function() {
                                    that.$router.push("login")
                                }, )
                            }
                        }
                    )
                    .catch(function(error) { // 请求失败处理
                        console.log(error);
                    });
            }
        },
        mounted() {
            this.getMsg()
        }
    };
</script>

<style>
    .btn-div {
        width: 56px;
        float: left;
        text-align: center;
        line-height: 30px;
        background: #409eff;
        font-size: 0.75rem;
        color: white;
        border-color: #409EFF;
    }

    .btn-div:hover {
        background: #7fbeff;
        cursor: pointer;
    }

    .el-col {
        padding: 0 !important;
    }
</style>
